@import "../base/_base";

.wraps-best {
  width: 100%;
  min-width: 500px;
  height: 2000px;//随着下拉添加高度
  position: relative;
  overflow-x: auto;
  overflow: hidden; /* This is so we can position our slides absolutely off screen and we won't get any horizontal scroll bars */
  //background: $color2;
  color: #fff;
  text-align: center;
  input{
    visibility: hidden;
  }
  header {
    //background: $color5;
    //position: absolute; /* We position it absolutely to the top-left corner */
    //top: 0;
    //left: 0;
    z-index: 900; /*And give it a z-index of 900 so that we are sure that's on top of the rest of the content.*/
    width: 100%;
    background-color: $color8;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    overflow: hidden;
    label {
        color: $color1;
        //display: inline-block; /* This way our labels will be side-by-side and centered in the middle of our header. Inline-block also allows for our line-height to be respected */
        //line-height: 20px; /* This gives us a larger clickable area*/
        padding: 0 20px;
        //margin-right: 4px;
        font-size: 16px;
        background-color: darken($color10,10%);
        i{
          margin-left: 5px;
          cursor: pointer;
        }
        &:hover {
          background: darken($color10,30%);;
        }
        @include respond-to(xs) {
          padding: 0 0.3rem;
        }
      }
  }
  .slide {
    margin-top: 20px;

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0.4rem;
    left: 100%; /* With these styles, we are pushing all of our slides off to the side of the window. */
    z-index: 10;

    background-color: $color8;
    background-position: 50% 50%;
    background-size: cover; /* now our images fill up the entire slide */
    transition: left 0s .75s; /* duration to 0.  delay it by 0.75 seconds. So these transition styles have the new slide coming in and afterwards our old slides, slides back out.*/
    h1 {
      opacity: 1;
      color: #2e353b;
      transform: translateY(100%);
      transition: transform .5s .5s, opacity .5s; /* This transition will allow us to see the opacity go down to zero, but it will delay the transform until the next slide is already covering it.*/
    }
    .htmleaf-header{
      letter-spacing: -1px;
      color: #2f3238;
      z-index: 10;
      position: static;
      height: 100%;
      }
    }
  }


[id^="slide"]:checked + .slide {
  left: 0;       /* When our radio element is checked, we want to position our slide back on the left corner of our wrapper, so we will set left to zero */
  z-index: 100;   /* we wanna raise the z-index to 100, to be sure our slide is on top of the previous one. */
  transition: left .65s ease-out;
}



